<template>
	<view>
		<view class="my-resume-main">
			<view class="name-box">
				<view class="name">
					<view class="t1">{{user.name || '-'}}</view>
					<view class="t2">
						{{user.name || '-'}}
						<text class="line">·</text>
						{{(user.birthday || 0) + '岁'}}
						<text class="line">·</text>
						{{user.education || '-'}}
						<text class="line">·</text>
						{{user.phone || '-'}}
					</view>
				</view>
				<image class="pull-right" data-key="portrait" :src="user.portrait" />
			</view>
			<view class="form-module">
				<view class="tit">技能标签
					<navigator url="/pages/recruit/edit-skill-label/index" data-key="skillData" @click="handleSendText" hover-class="hoverClass2">
						<text class="iconfontPT icondakai"></text>
					</navigator>
				</view>
				<view class="form-module-desc">
					<view class="skill-item inline-block" v-for="(item, index) in skillData" :key="index">
						<view class="item" v-if="item.value">{{item.value}}</view>
					</view>
				</view>
			</view>
			<view class="form-module">
				<view class="tit">上传工作照
					<view class="tips"><text class="iconfontPT iconzhuyi theme"></text>请上传真实工作照</view>
				</view>
				<view class="form-module-desc">
					<UploadGallery v-model="detail.workPhoto"></UploadGallery>
				</view>
			</view>
			<view class="form-module">
				<view class="tit">求职期望
					<navigator url="/pages/recruit/edit-job-dtl/index" v-if="detail.jobList.length < 3" hover-class="hoverClass2">
						<text class="iconfontPT icondakai"></text>
					</navigator>
				</view>
				<view class="joblist-main">
					<view class="joblist-box" v-for="(item, index) in detail.jobList" :key="index">
						<navigator :url="'/pages/recruit/edit-job-dtl/index?id=' + item.id || 1 " hover-class="hoverClass2">
							<view class="t1">
								{{item.position}}
								<text class="w32"></text>
								{{item.salary || '面议'}}
								<text class="iconfontPT iconZp-toright pull-right"></text>
							</view>
							<view class="t2">
								{{item.city || '地区不限'}}
								<text class="w32"></text>
								{{item.industry || '行业不限'}}
							</view>
						</navigator>
					</view>
				</view>
			</view>
			<view class="form-module">
				<view class="tit">兼职期望
					<navigator url="/pages/recruit/idle-expect/index" v-if="detail.idleList.length < 1" hover-class="hoverClass2">
						<text class="iconfontPT icondakai"></text>
					</navigator>
				</view>
				<view class="idle-main">
					<view class="idle-box" v-for="(item, index) in detail.idleList" :key="index">
						<navigator :url="'/pages/recruit/idle-expect/index?id=' + item.id" hover-class="hoverClass2">
							<view class="t1">{{item.s_time}}-{{item.e_time}}<text class="iconfontPT iconZp-toright pull-right"></text></view>
						</navigator>
					</view>
				</view>
			</view>
			<view class="form-module">
				<view class="tit">工作经历
					<navigator url="/pages/recruit/work-history/index" hover-class="hoverClass2">
						<text class="iconfontPT icondakai"></text>
					</navigator>
				</view>
				<view class="work-main">
					<view class="work-box" v-for="(item, index) in detail.workList" :key="index">
						<navigator :url="'/pages/recruit/work-history/index?id=' + item.id" hover-class="hoverClass2">
							<view class="t1">{{item.company_name}}<text class="time">{{item.s_serving}} - {{item.e_serving}}</text><text
								 class="iconfontPT iconZp-toright pull-right"></text></view>
						</navigator>
					</view>
				</view>
			</view>
			<view class="form-module">
				<view class="tit">自我评价
					<navigator @click="handleSendText" data-key="explored" url="/pages/recruit/edit-self-ev/index?type=explored"
					 hover-class="hoverClass2">
						<text class="iconfontPT icondakai"></text>
					</navigator>
				</view>
				<view class="explored-main">
					<navigator @click="handleSendText" data-key="explored" url="/pages/recruit/edit-self-ev/index?type=explored"
					 hover-class="hoverClass2">
						<view class="explored-box">{{explored}}</view>
					</navigator>
				</view>
			</view>
			<view class="form-module" style="padding: 10rpx;"></view>
		</view>
		<btnTpl @confirmEvent="submitEventFn">保存</btnTpl>
	</view>
</template>

<script>
	import UploadGallery from '@/pages/components/public/upload-gallery.vue';
	import btnTpl from '../../components/recruit/btn-tpl.vue'
	import imageUpload from '../../components/public/image-upload.vue'
	import {
		getResumeDtlInfo,
		getExpectDtlInfo,
		getFreeDtlInfo,
		getWorkDtlInfo,
		getUserDtlInfo,
		uploadImage
	} from '../../../apis/recruit/index.js'

	export default {
		data() {
			return {
				skillData: [],
				uploadImage: false,
				user: {},
				explored: '',
				detail: {
					skill: [],
					workPhoto: [],
					jobList: [],
					idleList: [],
					workList: [],
				},
				actions: [{
						name: '取消',
						color: '#19be6b'
					},
					{
						name: '确定'
					}
				],
				rules: {
					skill: [{
						required: true,
						message: '至少填写一项技能',
					}],
					"evaluate": [{
						required: true,
						message: '请填写自我评价',
					}],
					work_img: [{
						required: true,
						message: '至少上传一张工作照',
					}],
				}
			}
		},
		components: {
			btnTpl,
			imageUpload,
			UploadGallery
		},
		computed: {
			host() {
				return this.$baseHost.car
			}
		},
		onLoad(options) {
			this.initDataFn();
		},
		methods: {
			handleChooseImage(item, list) {
				this.detail.workPhoto = list
			},
			initDataFn() {
				let _this = this;
				getResumeDtlInfo().then(res => {
					// const {work,member,expect,xz_expect} = res.data
					
					if (res.code == 1) {
						let {
							work,
							member,
							expect,
							xz_expect
						} = res.data

						work = work.map(item => {
							item.s_serving = item.s_serving.split(' ')[0];
							item.e_serving = item.e_serving.split(' ')[0];
							return item;
						})

						member.work_img.length == 1 && member.work_img[0] == '' && (member.work_img = []);
						member.skill.length == 1 && member.skill[0] == '' && (member.skill = []);

						_this.detail.jobList = expect;
						_this.user = member;

						for (let i = 0; i < 3; i++) {
							_this.skillData.push({
								index: i + 1,
								value: member.skill[i] ? member.skill[i] : ''
							})
						}

						_this.detail.workPhoto = member.work_img;
						_this.detail.workList = work;
						_this.detail.idleList = xz_expect;
						_this.explored = member.evaluate;
					}
				})
			},
			handleSendText(e) {
				let key = e.currentTarget.dataset.key;
				this.uploadImage = true
				uni.setStorageSync(key, this[key])
			},
			//点击删除图片
			handleDeleteImg(path) {
				const _this = this
				uni.showModal({
					title: '删除',
					content: '您确定要删除该图片吗？',
					success: res => {
						const workPhoto = _this.detail.workPhoto
						if (res.confirm) {
							_this.detail.workPhoto = workPhoto.filter(item => item !== path)
						}
					}
				});
			},
			//保存个人信息
			submitEventFn() {
				let _this = this,
					params = {
						skill: _this.skillData,
						evaluate: _this.explored,
						work_img: _this.detail.workPhoto
					};

				this.$verification(params, _this.rules, ok => {
					if (ok) {
						console.log(params.skill)
						params.skill = params.skill.map(item => item.value).join(',')
						params.work_img = params.work_img.join(',')
						_this.$loading.show()
						getUserDtlInfo(params).then(res => {
							_this.$loading.hide()
							if (res.code == 1) {
								uni.showToast({
									title: '编辑个人资料成功',
									type: 'success'
								});
								setTimeout(() => {
									uni.navigateBack({
										delta: 1,
									})
								}, 1500);
							}
						})
					}
				})
			},
			// 求职期望子页面返回调用
			getExpectDtlInfo() {
				let _this = this;
				getExpectDtlInfo().then(res => {
					if (res.code == 1) {
						_this.detail.jobList = res.data
					}
				})
			},
			// 兼职期望子页面返回调用
			getFreeDtlInfo() {
				let _this = this;
				getFreeDtlInfo().then(res => {
					if (res.code == 1) {
						_this.detail.idleList = res.data
					}
				})
			},
			// 工作经历子页面返回调用
			getWorkDtlInfo() {
				let _this = this;
				getWorkDtlInfo().then(res => {
					if (res.code == 1) {
						_this.detail.workList = res.data
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.my-resume-main {
		padding: 40rpx 30rpx 0;
		color: #333;
		padding-bottom: 200rpx;
	}

	.name-box {
		height: 115rpx;

		image {
			width: 115rpx;
			height: 115rpx;
			border-radius: 50%;
		}

		.name {
			display: inline-block;

			.t1 {
				font-size: 48rpx;
				line-height: 48rpx;
				margin-top: 14rpx;
			}

			.t2 {
				font-size: 24rpx;
				line-height: 24rpx;
				color: #5F5F5F;
				margin-top: 20rpx;
			}
		}
	}

	.form-module {
		margin-top: 20rpx;
		box-shadow: 0 1rpx 0.5rpx -1rpx #CCCCCC;
		padding: 60rpx 0 20rpx;
	}

	.tit {
		font-size: 34rpx;
		font-weight: bold;
		line-height: 34rpx;

		navigator {
			float: right;
			width: 80rpx;
			height: 32rpx;
			text-align: right;
			padding-right: 2rpx;
		}

		.iconfontPT {
			font-weight: 400;
			font-size: 40rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #E41B08;
			float: right;
			display: flex;
			align-items: center;
			.iconfontPT {
				font-size: 30rpx;
				color: #E41B08;
				margin-right: 6rpx;
			}
		}
	}

	.form-module-desc {
		min-height: 40rpx;
		margin-top: 18rpx;
		overflow: hidden;

		.iconadd {}
	}

	.skill-item {
		.item {
			padding: 8rpx 26rpx;
			display: inline-block;
			margin: 15rpx 20rpx 0 0;
			background: #FFE7E5;
			border-radius: 5rpx;
			color: #E41805;
			font-size: 24rpx;
		}
	}

	.workPhoto-item {
		margin: 14rpx 20rpx 0 0;
		width: 144rpx;
		height: 144rpx;
		display: inline-block;
		vertical-align: top;
		position: relative;
	}

	.workPhoto-item {
		image {
			width: 100%;
			height: 100%;
		}
	}

	.workPhoto-item {
		&.add {
			line-height: 144rpx;
			text-align: center;
			font-size: 80rpx;
			background: #f8f8f8;

			.iconfontPT {
				font-size: 140rpx;
				color: #CDCDCD;
			}
		}
	}

	.joblist-main,
	.idle-main,
	.work-main,
	.explored-main {
		margin-top: 10rpx;
		overflow: hidden;
	}

	.joblist-box,
	.idle-box,
	.work-box,
	.explored-box {
		margin-top: 20rpx;
		position: relative;
	}

	.joblist-box {
		.t1 {
			font-size: 28rpx;
			font-weight: bold;
			line-height: 28rpx;
		}
	}

	.joblist-box {
		.t2 {
			font-size: 24rpx;
			margin-top: 13rpx;
			line-height: 24rpx;
			color: #999;
		}
	}

	.iconZp-toright {
		font-size: 24rpx;
		color: #999;
		font-weight: 400;
	}

	.idle-box {
		.t1 {
			font-size: 24rpx;
			line-height: 24rpx;
			font-weight: bold;
		}
	}

	.work-box {
		.t1 {
			font-size: 28rpx;
			line-height: 28rpx;
			font-weight: bold;

			.time {
				font-size: 20rpx;
				line-height: 20rpx;
				font-weight: 400;
				color: #999;
				padding-left: 30rpx;
			}
		}
	}

	.explored-box {
		font-size: 28rpx;
	}

	.delete-box {
		position: absolute;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, .3);
		width: 144rpx;
		height: 144rpx;
		text-align: center;
		font-size: 48rpx;
		line-height: 144rpx;
		color: #fff;
	}

	.line {
		display: inline-block;
		width: 20rpx;
		text-align: center;
	}
</style>
